import React,{Component } from 'react';
import {NavLink,Redirect} from 'react-router-dom';
import {Route} from 'react-router';
import Music from './Music'
import Vedio from './Vedio'
import Laugh from './Laugh'
import './system.css'


const Search=()=>{
    return(
        
        <div className="navSerach">
            <NavLink to='/home' >
                回到首页
            </NavLink>
           
            <NavLink to='/home/fun/music' activeStyle={{color:'pink'}}>
                音乐
            </NavLink>

            <NavLink to='/home/fun/vedio' activeStyle={{color:'pink'}}>
                视频
            </NavLink>

            <NavLink to='/home/fun/laugh' activeStyle={{color:'pink'}}>
                笑话
            </NavLink>
        </div>
    )
}

const  Fun = () => {
    return (
        <div className='Fun_container'>
                <Search />
                <div >
                    <Route exact path='/home/fun' render={() => {
                        return <Redirect to="/home/fun/music"/>
                    }}></Route>
                    <Route path='/home/fun/music'><Music/></Route>
                    <Route path='/home/fun/vedio'><Vedio/></Route>
                    <Route path='/home/fun/laugh'><Laugh/></Route>
                </div>
          
        </div>
    )
}

export default Fun;